<template>
  <div class="choiceGoods hdchoiceShop">
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="780px"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="门店名称：" prop="shopName">
              <el-input
                v-model="ruleForm.shopName"
                placeholder="请输入门店名称"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="onSearch"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="ruleForm.chioseVal"
              :titles="['全选门店', '已选门店']"
              :button-texts="['到左边', '到右边']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }"
              :data="dataList"
            ></el-transfer>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSure()" :loading="loading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { pageByyt } from "@/api/marketing/activeList.js";

export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: "",
      loading: false,
      labelWidth: "120px",
      rules: {
        name: [
          {
            required: true,
          },
        ],
      },
      ruleForm: {
        chioseVal: [],
        chioseShops: [],
      },
      dataVal: [],
      dataList: [],
      shopOriList: [],
      businessType: [],

      xsleList: [
        //业态
        {
          label: "商超",
          value: "02",
        },
        {
          label: "咖吧",
          value: "03",
        },
        {
          label: "洗衣",
          value: "04",
        },
        {
          label: "家政",
          value: "05",
        },
      ],
    };
  },
  methods: {
    getPlatformShopInfo(businessType) {
      if (businessType) {
        this.businessType = businessType;
      }
      pageByyt({
        businessType:
          // this.businessType.join(",") == "01"
          //   ? ""
          //   : this.businessType.join(","),
          this.businessType,
        shopName: this.ruleForm.shopName,
      }).then((result) => {
        console.log("pageByyt", result);
        this.dataList = [];
        result.data.data.forEach((ele) => {
          this.dataList.push({
            key: ele.shopId,
            label: ele.shopName + " - " + this.getDic(ele.businessType),
          });
        });
        this.shopOriList = result.data.data;
      });
    },

    handleSure() {
      console.log("handleSure", this.ruleForm);
      this.ruleForm.chioseShops = [];
      this.ruleForm.chioseVal.forEach((ele) => {
        console.log("handleSure22", ele);
        this.shopOriList.forEach((shop) => {
          if (ele === shop.shopId) {
            console.log("handleSure22");
            this.ruleForm.chioseShops.push(shop);
          }
        });
      });
      console.log("handleSure1", this.ruleForm);
      this.$emit("trigger", this.ruleForm);
      this.handleClose();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getDic(name) {
      let businessType3 = [];
      let businessType2 = name.split(",");
      businessType2.forEach((i) => {
        this.xsleList.forEach((m) => {
          if (i == m.value) {
            businessType3.push(m.label);
          }
        });
      });
      let businessType1 = businessType3.join(",");
      return businessType1;
    },
    onSearch() {
      this.getPlatformShopInfo();
    },
  },
};
</script>

<style lang="scss">
.hdchoiceShop {
  .el-transfer-panel__item.el-checkbox .el-checkbox__label {
    overflow: initial;
  }
}
</style>